<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ckeditor test</title>
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

  </head>
  
  <body>
    <textarea id="test" rows="5" cols="20" class="ckeditor"></textarea>
   
    <script type="text/javascript">
           CKEDITOR.replace('editor1', addUploadButton(this));
           function addUploadButton(editor){
           CKEDITOR.on('dialogDefinition', function( ev ){
               var dialogName = ev.data.name;
               var dialogDefinition = ev.data.definition;
               if ( dialogName == 'image' ){
                   var infoTab = dialogDefinition.getContents( 'info' );
                   infoTab.add({
                       type : 'button',
                       id : 'upload_image',
                       align : 'center',
                       label : '上传',
                       onClick : function( evt ){
                           var thisDialog = this.getDialog();
                           var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
                           var txtUrlId = txtUrlObj.getInputElement().$.id;
                           addUploadImage(txtUrlId);
                       }
                   }, 'browse'); //place front of the browser button
               }
           });
        }

        function addUploadImage(theURLElementId){
           var uploadUrl = "/admin/uploadPic.jsp";    //这是我/己的处理文件/图片上传的页面URL
           var imgUrl = window.showModalDialog(uploadUrl);
           //在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
           //更多window.showModalDialog的使用方法参考
           var urlObj = document.getElementById(theURLElementId);
           urlObj.value = imgUrl;
           urlObj.fireEvent("onblur"); //触发url文本框的onchange事件，以便预览图片
        }
    </script>
  </body>
</html>
